<template>
	<view class="my">

		<view class="head">
			<navigator url="./updateUserInfo/updateUserInfo">
				<view class="avatar">
					<image class="img" src="../../static/icons/alipay.png"></image>
				</view>
			</navigator>

			<view class="userInfo">
				<view class="nickname">{{info.nickname}}</view>
				<view class="username">用户名:{{info.username}}</view>
			</view>
		</view>

		<view class="myOrder">
			<view class="title">我的订单</view>
			<view class="nav">
				<navigator class="nav-item" url="/pages/my/order/order?type=0">
					<image class="icon" src="../../static/icons/icon-pay.png"></image>
					<view class="text">待付款</view>
				</navigator>
				<navigator class="nav-item" url="/pages/my/order/order?type=1">
					<image class="icon" src="../../static/icons/pay-done.png"></image>
					<view class="text">已付款</view>
				</navigator>
				<navigator class="nav-item" url="/pages/my/order/order?type=2">
					<image class="icon" src="../../static/icons/icon-car.png"></image>
					<view class="text">已发货</view>
				</navigator>
				<navigator class="nav-item" url="/pages/my/order/order?type=3">
					<image class="icon" src="../../static/icons/icon-done.png"></image>
					<view class="text">已收货</view>
				</navigator>
				<navigator class="nav-item" url="/pages/my/order/order?type=4">
					<image class="icon" src="../../static/icons/icon-back.png"></image>
					<view class="text">售后</view>
				</navigator>
			</view>
		</view>

		<view class="grid">
			<view class="grid-item">
				<image class="icon" src="../../static/icons/save.png"></image>
				<view class="text">商品收藏</view>
			</view>
			<view class="grid-item">
				<image class="icon" src="../../static/icons/brand.png"></image>
				<view class="text">品牌</view>
			</view>
			<view class="grid-item">
				<image class="icon" src="../../static/icons/article.png"></image>
				<view class="text">文章收藏</view>
			</view>
			<view class="grid-item">
				<navigator url="/pages/address/address">
					<image class="icon" src="../../static/icons/address.png"></image>
					<view class="text">地址</view>
				</navigator>
			</view>
			<view class="grid-item">
				<image class="icon" src="../../static/icons/card.png"></image>
				<view class="text">卡包</view>
			</view>

			<view class="grid-item">
				<navigator url="/pages/my/car/car">
					<image class="icon" src="../../static/icons/cart2.png"></image>
					<view class="text">购物车</view>
				</navigator>
			</view>

			<view class="grid-item">
				<image class="icon" src="../../static/icons/kf.png"></image>
				<view class="text">联系客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mix from "@/mixins/index.js"
	export default {
		data() {
			return {
				info: {},
				id:''
			};
		},
	
		mixins: [mix],
		onLoad(options) {
			this.id = options.id
			console.log(this.id)
			if (!this.checkLogins()) {
				return
			}
			var item = uni.getStorageSync("userInfo");
			console.log(item)
			this.info = item
		}
	
		
	}
</script>

<style lang="scss" scoped>
	.my {
		background-color: #F1ECE7;
		height: 100vh;

		.head {
			width: 90%;
			height: 75px;
			display: flex;
			align-items: center;
			margin: 0 auto;
			padding-top: 30px;
			padding-bottom: 20px;

			.avatar {
				width: 75px;
				height: 75px;
				border-radius: 50%;
				background-color: #c8c7cc;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.userInfo {
				margin-top: 16px;
				color: #3d4c46;
				padding: 7px 0;
				margin-left: 20px;

				.nickname {
					font-size: 20px;
					font-weight: 600;
				}

				.username {
					font-size: 13px;
					color: #999;
					margin-top: 10px;
				}
			}

		}

		.myOrder {
			width: 335px;
			height: 104px;
			border-radius: 2px;
			margin: 25px auto;
			background-color: #FFFFFF;

			.title {
				height: 38px;
				line-height: 38px;
				font-size: 13px;
				border-bottom: 1px solid #ddd;
				box-sizing: border-box;
				margin: 0 27px;
			}

			.nav {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				padding: 0 27px;
				box-sizing: border-box;

				.nav-item {
					width: 39px;
					height: 52px;

					.icon {
						width: 20px;
						height: 20px;
						margin-top: 10px;
					}

					.text {
						font-size: 13px;
						line-height: 18px;
						text-align: center;
					}
				}
			}
		}

		.grid {
			width: 335px;
			height: 300px;
			margin-top: 30px;
			border-radius: 10px;
			padding: 15px 0 30px;
			margin: 0 auto;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.grid-item {
				width: 33.33%;
				min-height: 100px;
				text-align: center;

				.icon {
					width: 25px;
					height: 25px;
					margin: 15px auto;
				}

				.text {
					font-size: 13px;
					line-height: 19px;

				}
			}
		}
	}
</style>
